<!-- 个人资料 -->
<!-- 个人资料 -->
<!-- images/personalInformation/personalInformation.wxml -->
<template>
  <view class="personal-information">
    <!-- 头像 -->
    <view class="head-portrait clearfix">
      <view class="head-txt">{{i18n.avatar}}</view>
      <view class="station-photo-con">
        <view class="add-img" @tap="getUploadImg">
          
          <image class="add-img-icon" :src="photoFiles?photoFiles:( pic? pic : '/static/images/icon/head04.png')" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <view class="persone-info">
      <!-- 昵称 -->
      <view class="msg-item nickname">
        <view class="msg-item-txt">{{i18n.nickname}}</view>
        <view class="right-arrow">
          <input type="text" class="choose-value" :value="nickName" @input="getNickNameInt" maxlength="50">
          <!-- <view class="choose-value">
            {{nickName}}
          </view> -->
          <!-- <image src="/static/images/icon/more.png" class="right-arrow-img"></image> -->
        </view>
      </view>
      <!-- 性别 -->
      <!-- <view class="msg-item gender">

        <picker class="gender-picker" @change="bindPickerChange" :value="sex" :range="genderArray">
          <view class="msg-item-txt">{{i18n.gender}}</view>
          <view class="right-arrow">
            <view class="choose-value">{{genderArray[sex]}}</view>
            <image src="/static/images/icon/more.png" class="right-arrow-img"></image>
          </view>
        </picker>
      </view> -->
      <view class="section" @tap="translate">
				<text>{{i18n.gender}}</text>
				<view class="pca">{{genderArray[sex]}}</view>
				<template v-if="showPicker">
					<view class="animation-element-wrapper" :animation="animation" :style="'visibility:' + (show ? 'visible':'hidden')"
					 @tap.stop="hiddenFloatView">
						<view class="animation-element" @tap.stop="nono">
							<text class="right-bt" @tap.stop="hiddenFloatView">{{i18n.confirm}}</text>
							<view class="line"></view>
							<picker-view indicator-style="height: 50px;" @change="bindChange" @tap.stop="nono">
								<picker-view-column>
									<view v-for="(item, index) in genderArray" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
				</template>
				<view class="arrow">
					<image src="/static/images/icon/more.png"></image>
				</view>
			</view>
      <!-- 电话 -->
      <!-- <view class="msg-item phone">
        <view class="msg-item-txt">电话</view>
        <view class="phone-num" v-if="phoneNumber">
          <button class="get-phone-num" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            授权获取手机号
          </button>
        </view>
        <view class="phone-num" v-if="!phoneNumber">{{phoneNumber}}</view>
      </view> -->
      <!-- 生日 -->
      <!-- <view class="msg-item birthday">
        <picker class="birthday-picker" mode="date" :value="date" start="" end="" @change="bindDateChange">
          <view class="msg-item-txt">生日</view>
          <view class="right-arrow">
            <view class="choose-value" v-if="date">{{date}}</view>
            <view class="choose-value" v-if="!date"></view>
            <image src="/static/images/icon/more.png" class="right-arrow-img"></image>
          </view>
        </picker>
      </view> -->

    </view>

    <view class="confirm" v-if="isChange" @tap="setUserInfo">{{i18n.confirm}}</view>
  </view>
</template>

<script module="wxs" lang="wxs" src="@/wxs/number.wxs"></script>

<script>
//index.js
//获取应用实例
var http = require("@/utils/http.js");
var config = require("@/utils/config.js");
var util = require("@/utils/util.js");
const app = getApp().globalData;

var t = 0;
var show = false;
var moveY = 200;

export default {
  data() {
    return {
      photoFiles:'',
	  // genderArray: ['男', '女'],
      // genderArray: [this.i18n.female, this.i18n.male],
	  // 不能直接这样的，要读取后保存进来
	  genderArray: [],
      genderIndex: 0,
      date: '2020-01-01', //用户生日
      dateIndex: 0,

      // birthDate: '',   //用户生日
      nickName: '',  //用户昵称
      score: 0,  //积分
      sex: 0, //性别
      oldSex:'', //原先性别
      sexNumber:0, // 判断有无滑动
      phoneNumber: '',  //手机号
      countryCode: '',  //区号
      pic:'',
      isChange: false, // 是否修改用户信息
      animation: "",
      show: "",
      showPicker: false
    };
  },

  components: {},
  props: {},
  
  computed:{
  	i18n() {
  		return this.$t('index')
  	}
  },
  
  onLoad: function () {
    //加载会员信息
  this.genderArray.push(this.i18n.male)
	this.genderArray.push(this.i18n.female)
    this.queryUserInfo()
  },
  onShow: function () {
	  //头部导航标题
	  uni.setNavigationBarTitle({
	      title:this.i18n.personalData
	  });
  },
  onHide: function() {
    this.showPicker = false
  },
  onReady: function() {
    this.animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 0,
      timingFunction: "ease",
      delay: 0
    });
    this.animation.translateY(200 + 'vh').step();
    this.setData({
      animation: this.animation.export(),
      show: show
    });
  },
  methods: {
    /**
     * 上传图片
     */
    getUploadImg: function (e) {
		// uni.chooseImage(  uni.chooseFile
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          var tempFilePaths = res.tempFilePaths;
          uni.showLoading({
            mask: true
          })
          var params = {
            url: "/p/file/upload",
            filePath: tempFilePaths[0],
            name: 'file',
            callBack: (res2) => {
              uni.hideLoading();
              this.photoFiles = JSON.parse(res2).resourcesUrl + JSON.parse(res2).filePath,
              this._photoFiles = JSON.parse(res2).filePath
							this.isChange = true
            },
          };
          http.upload(params);
        },
				fail: (failMsg) => {
					console.log(failMsg)
				}
      })
    },


    // 获取用户信息
    queryUserInfo : function() {
      uni.showLoading();
      var params = {
        url: "/p/user/userInfo",
        method: "GET",
        data: {},
        callBack: (res) => {
          uni.hideLoading();
          // var date = this.data.date
          // var phoneNumber = this.data.phoneNumber
          this.date =  res.birthDate,  //用户生日
          this.nickName =  res.nickName,  //用户昵称
          this.score =  res.score,  //积分
          this.sex =  Number(res.sex), //性别
          this.oldSex = Number(res.sex), //原本的性别
          this.phoneNumber =  res.userMobile, //用户手机号
          this.pic = res.pic
          console.log('sex:',this.sex)
          if(!res.birthDate){
            // 获取当前日期并改变日期展示格式
            var curDate = new Date();
            var seperator1 = "-";
            var month = curDate.getMonth() + 1 < 10 ? "0" + (curDate.getMonth() + 1) : curDate.getMonth() + 1;   //截取月份
            var strDate = curDate.getDate() < 10 ? "0" + curDate.getDate() : curDate.getDate();   //截取日期
            this.date = curDate.getFullYear() + seperator1 + month + seperator1 + strDate  //将年月日用'-'拼接起来
            console.log(this.date)
          }
        }
      };
      http.request(params);
    },

    //移动按钮点击事件
    translate: function(e) {
      if (t == 0) {
        moveY = 0;
        show = false;
        t = 1;
      } else {
        moveY = 200;
        show = true;
        t = 0;
      }
      this.setData({
        show: true,
        showPicker: true
      }); // this.animation.translate(arr[0], arr[1]).step();

      this.animationEvents(this, moveY, show);
    },

    //隐藏弹窗浮层
    hiddenFloatView(e) {
      //console.log(e);
      if(!this.sexNumber){
        this.setData({
          sex:0
        })
          if(this.sex!=this.oldSex){
            this.isChange = true
          }
      }
      moveY = 200;
      show = true;
      t = 0;
      this.animationEvents(this, moveY, show);
    },

    //动画事件
    animationEvents: function(that, moveY, show) {
      //console.log("moveY:" + moveY + "\nshow:" + show);
      that.animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 400,
        timingFunction: "ease",
        delay: 0
      });
      that.animation.translateY(moveY + 'vh').step();
      that.setData({
        animation: that.animation.export()
      });
    },

    //用户昵称
    getNickNameInt: function(e) {
      this.nickName = e.detail.value
			this.isChange = true
    },

    // 选择性别
    bindChange: function(e) {
      this.sex = e.detail.value[0]
      console.log(this.sex);
      this.setData({
        sexNumber : this.sexNumber+=1
      })
      if(this.sex!=Number(this.oldSex)){
        this.isChange = true
      }else{
        this.isChange = false
      }
    },

    // 选择日期
    bindDateChange: function (e) {
      this.date = e.detail.value
			this.isChange = true
    },

   
    /**
     * 设置用户信息
     */
    setUserInfo: function() {
			if (!this.nickName.trim()) {
				uni.showToast({
					title: this.i18n.nicknameEmptyTips,
					icon:'none',
				})
				return
			}
			if (this.isChange ) {
				uni.showLoading();
				var params = {
					url: "/p/user/setUserInfo",
					method: "PUT",
					data: {
						avatarUrl:this.photoFiles,
						birthDate: this.date,
						sex: this.sex,
						nickName: this.nickName
					},
					callBack: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: this.i18n.successfullyModified,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							this.queryUserInfo()
							// uni.switchTab({
							//   url: '/pages/user/user'
							// })
							this.$Router.pushTab('/pages/user/user')
						},1000)
					}
				};
				http.request(params);
			}
    },

  nono(){}

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  onPullDownRefresh: function () {

  },
  onShareAppMessage: function (e) {
    return {

    };
  },
};
</script>
<style>
@import "./personalInformation.css";
</style>
